<template>
  <!-- 基础题库 -->
  <div class="container">
    <el-card>
      <div class="que-top">
        <span style="font-size: 12px; color: pink">说明:目前支持学科和关键字条件筛选</span>
        <el-button class="el-icon-edit" type="success" size="small" @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 筛选表单 -->
      <el-form :model="form" label-width="80px" class="demo-ruleForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                style="width: 100%"
                size="small"
                v-model="form.subjectID"
                @change="subjectFn"
                placeholder="请选择学科"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select style="width: 100%" size="small" v-model="form.catalogID" placeholder="请选择目录">
                <el-option
                  v-for="item in secondList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select style="width: 100%" size="small" v-model="form.tags" placeholder="请选择标签">
                <el-option v-for="item in Tags" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input placeholder="请输入题干" v-model="form.keyword" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select style="width: 100%" size="small" v-model="form.questionType" placeholder="请选择类型">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select style="width: 100%" size="small" v-model="form.difficulty" placeholder="请选择难度">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select style="width: 100%" size="small" v-model="form.direction" placeholder="请选择方向">
                <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select style="width: 100%" size="small" v-model="form.creatorID" placeholder="请选择录入人">
                <el-option
                  v-for="item in simpleUsersList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input placeholder="请输入" v-model="form.remarks" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input placeholder="请输入" v-model="form.shortName" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                @change="provinceFn"
                style="width: 50%"
                size="small"
                v-model="form.province"
                placeholder="城市"
              >
                <el-option v-for="item in enumObjProvince" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-select style="width: 50%" v-model="form.city" placeholder="区县">
                <el-option v-for="item in enumObjCity" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="right-btn">
              <el-button @click="resetForm" size="small">清除</el-button>
              <el-button @click="searchQuestion" size="small" type="primary">搜索</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 警告 -->
      <el-alert style="margin-bottom: 15px" :title="'数据一共 ' + `${total}` + ' 条'" type="info" show-icon> </el-alert>
      <!-- 题库列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号"> </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <!-- 封装的方法筛选出题型对应的文字 -->
          <template #default="{ row }">
            {{ tableTypeFilters(questionType, row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column width="200" prop="question" label="题干">
          <template #default="{ row }">
            {{ row.question.replace(/&lt;[^>]+>/g, '') }}
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template #default="{ row }">
            {{ row.addDate | dayFormatTime }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <!-- 封装的方法筛选出难度对应的文字 -->
          <template #default="{ row }">
            {{ tableTypeFilters(difficulty, row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column prop="creatorID" label="录入人">
          <template #default="{ row }">
            {{ tableTypesimpleUsers(row.creatorID) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template #default="{ row }">
            <div class="operateBtn">
              <!-- 预览 -->
              <el-button @click="showPreviewDia(row.id)" circle plain icon="el-icon-view" size="small" type="primary">
              </el-button>
              <!-- 编辑 -->
              <el-button
                @click="$router.push(`/questions/new?id=${row.id}`)"
                circle
                plain
                icon="el-icon-edit"
                size="small"
                type="success"
              ></el-button>
              <!-- 删除 -->
              <el-button
                @click="delQuestions(row)"
                circle
                plain
                icon="el-icon-delete"
                size="small"
                type="danger"
              ></el-button>
              <!-- 加入精选 -->
              <el-button
                @click="choiceAddQuestions(row.id)"
                circle
                plain
                icon="el-icon-check"
                size="small"
                type="warning"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15]"
          :page-size="pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 预览对话框 -->
    <questionsPreview :dialogVisible.sync="dialogVisible" :previewId="previewId" />
  </div>
</template>

<script>
// 获取学科列表api
import { subjectsSimpleApi } from '@/api/hmmm/subjects.js'
// 目录api
import { simpleDirectoryApi } from '@/api/hmmm/directorys.js'
// 标签api
import { simpleTagsApi } from '@/api/hmmm/tags.js'
// 录入人api
import { simpleUsersApi } from '@/api/base/users.js'
// 基础题库api
import { questionsListApi, removeQuestionsApi, choiceAddQuestionsApi } from '@/api/hmmm/questions.js'
// 枚举
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
// 城市枚举
import { provinces, citys } from '@/api/hmmm/citys.js'
// 导入预览组件
import questionsPreview from '../components/questions-previewDialog.vue'
export default {
  components: { questionsPreview },
  data() {
    return {
      // 筛选区域数据
      form: {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 城市
        province: '',
        // 区县
        city: ''
      },
      // 学科列表
      subjectList: [],
      // 二级目录列表
      secondList: [],
      // 标签列表
      Tags: [],
      // 录入人列表
      simpleUsersList: [],
      // 试题类型枚举
      questionType,
      // 难度枚举
      difficulty,
      // 方向枚举
      direction,
      // 当前页
      page: 1,
      // 页容量
      pagesize: 5,
      // 总条数
      total: 0,
      // 题库列表
      tableData: [],
      // 控制预览对话框展示隐藏
      dialogVisible: false,
      // 传给预览页使用 当前行id
      previewId: ''
    }
  },
  created() {
    this.subjectSimpleList()
    this.simpleUsers()
    this.simpleDirectory()
  },
  // 计算 市 县
  computed: {
    // 市
    enumObjProvince() {
      return provinces()
    },
    // 县
    enumObjCity() {
      return citys(this.form.province)
    }
  },
  methods: {
    // 获取简单学科列表
    async subjectSimpleList() {
      const { data: res } = await subjectsSimpleApi()
      this.subjectList = res
    },
    // 学科下拉框监听
    async subjectFn() {
      // 在获取前清空 目录和标签的值
      this.secondList = []
      this.form.catalogID = ''
      this.form.tags = ''
      this.Tags = []
      // 获取二级目录 传参为 学科选中的id
      const res = await simpleDirectoryApi({ subjectID: this.form.subjectID })
      // console.log(res)
      // 赋值给目录列表
      this.secondList = res.data
      // 获取标签 传参为 学科选中的id
      const { data } = await simpleTagsApi({ subjectID: this.form.subjectID })
      // console.log(data)
      // 赋值给标签列表
      this.Tags = data
    },
    // 获取录入人列表
    async simpleUsers() {
      const { data } = await simpleUsersApi()
      // console.log(data)
      this.simpleUsersList = data
    },
    // 城市选中清空区县
    provinceFn() {
      this.form.city = ''
    },
    // 点击清除
    resetForm() {
      // 清空表单
      this.form = {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 城市
        province: '',
        // 区县
        city: ''
      }
      // 也要清空二级目录和标签
      this.secondList = []
      this.Tags = []
    },
    // 获取基础题库
    async simpleDirectory() {
      const { data: res } = await questionsListApi({ page: this.page, pagesize: this.pagesize })
      // 题库数据列表赋值
      this.tableData = res.items
      // 总条数赋值
      this.total = res.counts
      // console.log(this.tableData)
    },
    // 点击搜索
    async searchQuestion() {
      // 判断一下 因为根据学科的内容来进行搜索所以判断他有没有值 如果有值 那么点击搜索时 将搜索的字段和当前页和页容量传给后端 发获取基础题库请求
      if (this.form.subjectID != '') {
        const { data: res } = await questionsListApi({ page: 1, pagesize: 10, ...this.form })
        // 题库数据列表赋值
        this.tableData = res.items
      } else {
        // 反之没有值,将正常渲染的值 渲染回来
        this.simpleDirectory()
      }
    },
    // 分页监听页容量
    handleSizeChange(val) {
      this.pagesize = val
      this.simpleDirectory()
    },
    // 监听当前页
    handleCurrentChange(val) {
      this.page = val
      this.simpleDirectory()
    },
    // table表格枚举处理
    // 第一个参数是 枚举值 第二个是当前表格的值
    // 复用两次 一次题型枚举 一次难度枚举
    tableTypeFilters(enumObj, data) {
      // 接口返回的 标识码是 字符串的 不能用全等
      // 拿到与当前表格数据相同的枚举
      const res = enumObj.find(item => item.value == data)
      return res ? res.label : '未知'
    },
    // table录入人处理
    tableTypesimpleUsers(data) {
      // 录入人不是枚举所以单独写方法
      const res = this.simpleUsersList.find(item => item.id == data)
      return res ? res.username : '未知'
    },
    // 点击预览
    showPreviewDia(id) {
      this.dialogVisible = true
      this.previewId = id
    },
    // 点击删除
    delQuestions(row) {
      // 提示用户
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 每次接口调用成功,都要判断是否要进行页码值的回退操作
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          // 发请求删除
          await removeQuestionsApi(row)
          // 提示成功
          this.$message.success('删除成功')
          // 重新渲染
          this.simpleDirectory()
        })
        .catch()
    },
    // 加入精选
    choiceAddQuestions(id) {
      // 提示用户
      this.$confirm('确定要加入精选吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发请求加精
          await choiceAddQuestionsApi({ id: id, choiceState: 1 })
          // 提示
          this.$message.success('添加成功')
          // 跳精选页
          this.$router.push('/questions/choice')
        })
        .catch()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
.el-card__body {
  padding: 20px;
}
.que-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.right-btn,
.pagination {
  display: flex;
  justify-content: flex-end;
}
.operateBtn {
  display: flex;
  justify-content: center;
}
::v-deep .el-pagination__jump {
  margin-left: 0;
}
</style>
